<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.7.0.2.946"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>papagoyo support</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh16";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body class="xr_bgb16">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 3052px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_xri_" style="width: 760px; height: 3052px;">
 <span class="xr_ar" style="left: -564px; top: 2987px; width: 1900px; height: 65px; background-color: #2F7FAC;"></span>
 <div class="xr_s1" style="position: absolute; left:36px; top:189px; width:689px; height:111px;">
  <span class="xr_tl xr_s1" style="top: -14px;">Papagayo is a great (and free) program made by Mike Clifton and is distributed by LostMarble.com.</span>
  <span class="xr_tl xr_s1" style="top: 3px;">Papagayo is designed to help you line up phonemes (mouth shapes) with the actual recorded sound of </span>
  <span class="xr_tl xr_s1" style="top: 21px;">actors speaking. Papagayo makes it easy to lip sync animated characters by making the process very simple </span>
  <span class="xr_tl xr_s1" style="top: 39px;">- just type in the words being spoken (or copy/paste them from the animation's script), then drag the words </span>
  <span class="xr_tl xr_s1" style="top: 57px;">on top of the sound's waveform until they line up with the proper sounds. </span>
 </div>
 <div class="xr_s4" style="position: absolute; left:380px; top:128px; width:10px; height:10px;">
  <span class="xr_tc xr_s4" style="left: -176px; top: -14px; width: 353px;">Papagayo&nbsp; Lip Sync Support in Spriter Pro</span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 71px; width: 1900px; height: 24px; background-color: #2F7FAC;"></span>
 </a>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar xr_t16047" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 0px; width: 1900px; height: 70px; background-color: #5DABD7; -o-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -webkit-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -ms-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);"></span>
 <!--[if lt IE 9]><style type="text/css">.xr_t16047 {margin-left:0px; margin-top:0px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.000,M21=-0.000,M12=0.000,M22=-1.000,sizingMethod='auto expand')}</style><![endif]-->
 </a>
 <div class="Heading_1" style="position: absolute; left:174px; top:47px; width:10px; height:10px;font-size:21px;color:#FFFFFF;">
  <h1 class="xr_tl Heading_1" style="top: -29px;font-size:21px;color:#FFFFFF;margin:0;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="font-size:32px;color:#FFFFFF;">Spriter Pro</span></a><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="color:#FFFFFF;">&nbsp;User&#8217;s Manual version 1.0</span></a></h1>
 </div>
 <div class="xr_s2" style="position: absolute; left:243px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -50px; top: -11px; width: 100px;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Quickstart</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:350px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -35px; top: -11px; width: 69px;"><a href="default%20pivot%20points.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Sprites</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:441px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -31px; top: -11px; width: 63px;"><a href="creating%20and%20assigning%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Bones</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:543px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -49px; top: -11px; width: 98px;"><a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Animating</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:679px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -79px; top: -11px; width: 157px;"><a href="what%20are%20character%20maps.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Character Maps</span></a></span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/196.jpg" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 8px; top: 1px; width: 93px; height: 93px;"/>
 </a>
 <div class="xr_s2" style="position: absolute; left:132px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -27px; top: -11px; width: 54px;"><a href="index.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Index</span></a></span>
 </div>
 <a href="adding%20sound%20effects.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/197.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <a href="adding%20sound%20effects.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/198.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 2936px; width: 34px; height: 34px;"/>
 </a>
 <a href="adding%20collision%20rectangles%20to%20frames.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/199.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 2936px; width: 34px; height: 34px;"/>
 </a>
 <div class="xr_s3" style="position: absolute; left:299px; top:120px; width:10px; height:10px;">
  <span class="xr_tl xr_s3" style="top: -4px;">TM</span>
 </div>
 <img class="xr_ap" src="index_htm_files/239.jpg" alt="" title="" style="left: 111px; top: 278px; width: 500px; height: 311px;"/>
 <div class="xr_s1" style="position: absolute; left:36px; top:631px; width:676px; height:63px;">
  <span class="xr_tl xr_s1" style="top: -14px;">Papagayo can be downloaded from http://www.lostmarble.com/papagayo/ for either Windows or Mac.</span>
  <span class="xr_tl xr_s1" style="top: 3px;">To add lip syncing to your Spriter animation you must follow the following steps after installing </span>
  <span class="xr_tl xr_s1" style="top: 21px;">Papagayo:</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:697px; width:665px; height:120px;">
  <span class="xr_tl xr_s1" style="top: -14px;">1) Start Papagayo and load up your WAV file containing the dialogue into Papagayo by dropping the </span>
  <span class="xr_tl xr_s1" style="top: 3px;">file into the designated spot in Papagayo&#8217;s window. Then in the &#8220;spoken text&#8221; window, type all of the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">words spoken in the sound file in their propper order.&nbsp; once you do so you&#8217;ll see orange blocks </span>
  <span class="xr_tl xr_s1" style="top: 39px;">representing all the individual words spread out across the graphic representation of the sound file.&nbsp; </span>
  <span class="xr_tl xr_s1" style="top: 57px;">Now left click and drag on the beginning block or the ending block of each word to properly make each </span>
  <span class="xr_tl xr_s1" style="top: 74px;">word start and end properly according to the actual sounds. </span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:1124px; width:665px; height:75px;">
  <span class="xr_tl xr_s1" style="top: -14px;">2) Once all the words are properly alligned, export the file (DAT) from Papagayo making sure to have </span>
  <span class="xr_tl xr_s1" style="top: 3px;">the export mode set to Anime Studio. (it is by default). Then make sure the sound file. (WAV) and the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">DAT file from Papagayo are in your Spriter projects folder, either directly or in a sub folder.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2218px; width:667px; height:105px;">
  <span class="xr_tl xr_s1" style="top: -14px;">4) In Spriter, once the animation is otherwise finished, add the sound file at the proper point in the </span>
  <span class="xr_tl xr_s1" style="top: 3px;">animations time line. <span class="xr_s4" style="">IMPORTANT: Because the next step in the process will permanently add a </span></span>
  <span class="xr_tl xr_s4" style="top: 21px;">very large amount of key frames to the animation, which would make editing the animatio after </span>
  <span class="xr_tl xr_s4" style="top: 39px;">the fact very difficuly, we highly recommend you first create a clone of the animation as a back-</span>
  <span class="xr_tl xr_s4" style="top: 57px;">up BEFORE you proceed to step 4!</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2660px; width:667px; height:245px;">
  <span class="xr_tl xr_s1" style="top: -14px;">5) Assuming you&#8217;ve made a backup copy of your otherwise finished animation as described above, now </span>
  <span class="xr_tl xr_s1" style="top: 3px;">just find and right click on the graphical representation of the sound file in the timeline, and choose </span>
  <span class="xr_tl xr_s1" style="top: 21px;">&#8220;import lip sync&#8221;. Then a small dialogue box will appear asking you to choose the lip Sinc File (This is </span>
  <span class="xr_tl xr_s1" style="top: 39px;">the DAT file exported from Papagayo) and the &#8220;Mouth Timeline&#8221; (this is asking for the name of the </span>
  <span class="xr_tl xr_s1" style="top: 57px;">object timeline, aka the sprite which Spriter will be image swapping to prepresent all the mouth shapes </span>
  <span class="xr_tl xr_s1" style="top: 74px;">for the lip syncing.&nbsp; Once these options are set properly, click OK and the lyp syncing process should </span>
  <span class="xr_tl xr_s1" style="top: 92px;">add all the necessary keyframes to the animation in order to change the mouth image at the apropriate </span>
  <span class="xr_tl xr_s1" style="top: 110px;">times to represent the sound being made at that moment in time.&nbsp; Remember, if you need to change the </span>
  <span class="xr_tl xr_s1" style="top: 127px;">animation after importing the lyp sync, you should once again copy the back up of the animation that </span>
  <span class="xr_tl xr_s1" style="top: 145px;">was created BEFORE the import of lip sync, edit the copy, and then re-iumport the lip sync.&nbsp; This </span>
  <span class="xr_tl xr_s1" style="top: 163px;">process will ensure you always have a clean, lip sync free version of the animation to change and edit </span>
  <span class="xr_tl xr_s1" style="top: 181px;">as needed.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/240.jpg" alt="" title="" style="left: 30px; top: 1744px; width: 700px; height: 439px;"/>
 <img class="xr_ap" src="index_htm_files/241.jpg" alt="" title="" style="left: 114px; top: 821px; width: 500px; height: 267px;"/>
 <div class="xr_s1" style="position: absolute; left:47px; top:1534px; width:667px; height:202px;">
  <span class="xr_tl xr_s1" style="top: -14px;">3) In order for lip syncing to work, you need to have created a series of swapible mouth images, each </span>
  <span class="xr_tl xr_s1" style="top: 3px;">carefully designed to represent the pronounciation of specific sounds that people make while speaking.&nbsp; </span>
  <span class="xr_tl xr_s1" style="top: 21px;">Each file must be&nbsp; carefully named exactly like the reference chart above shows.&nbsp; Create a folder in </span>
  <span class="xr_tl xr_s1" style="top: 39px;">your Spriter project folder for each of the angles the mouth will be seen from...for example a folder </span>
  <span class="xr_tl xr_s1" style="top: 57px;">called &#8220;mouth_sideview&#8221; and one called &#8220;mouth_frontview&#8221; and put all the apropriate mouth images </span>
  <span class="xr_tl xr_s1" style="top: 74px;">into their folders. The animation you&#8217;ll be aplying lip sync to should already have one of these mouth </span>
  <span class="xr_tl xr_s1" style="top: 92px;">images present throughout the entire timeline, the &#8220;rest&#8221; image for example.&nbsp; If your head changes </span>
  <span class="xr_tl xr_s1" style="top: 110px;">angles within the animation, you can image swap the mouth image at that point in the timeline from the </span>
  <span class="xr_tl xr_s1" style="top: 127px;">mouth image &#8220;rest&#8221; in one folder to the &#8220;rest&#8221; image in the forlder for the diferent angle...such as </span>
  <span class="xr_tl xr_s1" style="top: 145px;">changeing from front view to side view. (you can find other mouth shap references here: </span>
  <span class="xr_tl xr_s1" style="top: 163px;">http://www.brashmonkeygames.com/spriter/Papagayo/PapagayoMouthShapes.html)</span>
 </div>
 <img class="xr_ap" src="index_htm_files/242.jpg" alt="" title="" style="left: 63px; top: 1176px; width: 611px; height: 334px;"/>
 <img class="xr_ap" src="index_htm_files/243.jpg" alt="" title="" style="left: 119px; top: 2316px; width: 501px; height: 312px;"/>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <a href="adding%20collision%20rectangles%20to%20frames.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/200.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>